<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">累计会员人数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            500
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">今日累计发言人数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            125
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">今日活跃会员数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            30
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">今日新增会员数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            3
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md12">
            <h3 style="width: 100%; text-align: center;background: #fff;padding: 10px 0 0">会员总数</h3>
            <div id="allVip" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md6">
            <h3 style="width: 100%; text-align: center;background: #fff;padding: 10px 0 0">会员新增/减少统计</h3>
            <div id="vipNumChange" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs6 layui-col-md6">
            <h3 style="width: 100%; text-align: center;background: #fff;padding: 10px 0 0">会员互动分析</h3>
            <div id="vipInteract" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md6">
            <h3 style="width: 100%; text-align: center;background: #fff;padding: 10px 0 0">活动类型分析</h3>
            <div id="joinActive" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs6 layui-col-md6">
            <h3 style="width: 100%; text-align: center;background: #fff;padding: 10px 0 0">报名活动分析</h3>
            <div id="activeType" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>

<!--    <div class="layui-row layui-col-space15">-->
<!--        <div class="layui-col-xs12 layui-col-md6">-->
<!--            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>-->
<!--        </div>-->
<!--        <div class="layui-col-xs12 layui-col-md6">-->
<!--            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>-->
<!--        </div>-->
<!--    </div>-->


</div>
<!--</div>-->
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        /**
         * 报表功能
         */
        var allVip = echarts.init(document.getElementById('allVip'));

        var optionAllVip ={
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '1%',
                right: '2%',
                top: '8%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    name: '人数',
                    type: 'value',
                    splitNumber: 10,
                    min: 35000,
                    max: 37000
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '40',
                    data: [35620, 35621, 35662, 35623, 35624, 35525, 35625, 35627, 35648, 35629, 35550, 35631]
                }
            ]
        };
        allVip.setOption(optionAllVip);


        /**
         * 玫瑰图表
         */
        // var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        // var optionPies = {
        //     title: {
        //         text: '指标名称-玫瑰图',
        //         left: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         formatter: '{a} <br/>{b} : {c} ({d}%)'
        //     },
        //     legend: {
        //         orient: 'vertical',
        //         left: 'left',
        //         data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        //     },
        //     series: [
        //         {
        //             name: '访问来源',
        //             type: 'pie',
        //             radius: '55%',
        //             center: ['50%', '60%'],
        //             roseType: 'radius',
        //             data: [
        //                 {value: 335, name: '直接访问'},
        //                 {value: 310, name: '邮件营销'},
        //                 {value: 234, name: '联盟广告'},
        //                 {value: 135, name: '视频广告'},
        //                 {value: 368, name: '搜索引擎'}
        //             ],
        //             emphasis: {
        //                 itemStyle: {
        //                     shadowBlur: 10,
        //                     shadowOffsetX: 0,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                 }
        //             }
        //         }
        //     ]
        // };
        // echartsPies.setOption(optionPies);


        /**
         * 柱状图
         */
        var vipNumChange = echarts.init(document.getElementById('vipNumChange'), 'walden');

        var optionDataset = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['新增人数', '减少人数']
            },
            grid: {
                left: '2%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    name: '人数',
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            series: [
                {
                    name: '新增人数',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [1, 2, 5, 4, 1, 33, 2, 1, 2, 1, 1, 3]
                },
                {
                    name: '减少人数',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [-5, -6, -10, -33, -22, -1, -0, -12, -2, -6, -5, -20]
                }
            ]
        };

        vipNumChange.setOption(optionDataset);


        var vipInteract = echarts.init(document.getElementById('vipInteract'), 'walden');

        var optionVipInteract =  {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['互动次数', '互动人数']
            },
            grid: {
                top: '15%'
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '互动次数',
                    interval: 36
                },
                {
                    type: 'value',
                    name: '互动人数',
                    interval: 5
                }
            ],
            series: [
                {
                    name: '互动次数',
                    type: 'bar',
                    data: [
                        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                    ]
                },
                {
                    name: '互动人数',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };

        vipInteract.setOption(optionVipInteract);


        var activeType = echarts.init(document.getElementById('activeType'), 'walden');

        var optionActiveType = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}<br/>{c} 次'
            },
            xAxis: {
                name: '月份',
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                name: '次数',
                type: 'value'
            },
            series: [
                {
                    data: [1, 2, 5, 4, 2, 4, 2, 1, 2, 2, 3, 3],
                    type: 'line',
                    smooth: true
                }
            ]
        };

        activeType.setOption(optionActiveType);


        var joinActive = echarts.init(document.getElementById('joinActive'), 'walden');

        var optionJoinActive ={
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '2%',
                left: 'center'
            },
            series: [
                {
                    name: '活动类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 23, name: '报名' },
                        { value: 12, name: '接龙' },
                        { value: 55, name: '投票' },
                        { value: 6, name: '问卷调查' }
                    ]
                }
            ]
        };

        joinActive.setOption(optionJoinActive);

        /**
         * 中国地图
         */
        // var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');
        //
        //
        // var optionMap = {
        //     legend: {},
        //     tooltip: {
        //         trigger: 'axis',
        //         showContent: false
        //     },
        //     dataset: {
        //         source: [
        //             ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        //             ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        //             ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        //             ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        //             ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
        //         ]
        //     },
        //     xAxis: {type: 'category'},
        //     yAxis: {gridIndex: 0},
        //     grid: {top: '55%'},
        //     series: [
        //         {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        //         {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        //         {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        //         {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        //         {
        //             type: 'pie',
        //             id: 'pie',
        //             radius: '30%',
        //             center: ['50%', '25%'],
        //             label: {
        //                 formatter: '{b}: {@2012} ({d}%)'
        //             },
        //             encode: {
        //                 itemName: 'product',
        //                 value: '2012',
        //                 tooltip: '2012'
        //             }
        //         }
        //     ]
        // };
        //
        // echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
